<template>
</template>

<script>
</script>

<style>
</style><template>
	<view class="my">
		<view class="my-top">
			<view class="title-my">领取明细</view>
			<view class="content-nav">
				<view class="content-info">
					<image class="image-style" :src="userinfo.avatar"></image>
					<view class="info-name">{{userinfo.mobile}}</view>
				</view>
			</view>
		</view>
		<view class="my-nav">
			<view class="nav-grjl">
				<view class="nav-top">
					<image src="../../static/lp.png" style="width: 30upx;height: 30upx;margin-right: 20upx;"></image>
					<view style="font-size: 32upx;font-weight: bold;color: #EA002C;letter-spacing: 3px;">领取明细</view>
				</view>
				<view class="nav-bottom">
					<view class="title-nav-bottom">
						<view style="letter-spacing: 5upx;width: 200upx;text-align: center;">成员</view>
						<view style="letter-spacing: 5upx;width: 200upx;text-align: center;">本月</view>
						<view style="letter-spacing: 5upx;width: 200upx;text-align: center;">本年</view>
					</view>
					<u-line color="#EA002C"/>
					<view class="title-nav-bottom-bottom" v-for="(item,index) in data" :key="index">
						<view style="text-align: center;width: 200upx;">{{item.username}}</view>
						<view style="text-align: center;width: 200upx;">{{Number(item.m_money).toFixed(2)}}</view>
						<view style="text-align: center;width: 200upx;">{{Number(item.y_money).toFixed(2)}}</view>
					</view>
				</view>
				<view class="btn-bottom" @click="getReturn">返回</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: {},
				form: {
					name: '',
					intro: '',
				},
				data: [],
				errorMessage: '剑未配妥，出门已是江湖',
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					intro: [{
						min: 5,
						message: '简介不能少于5个字',
						trigger: 'change'
					}]
				}
			};
		},
		onShow() {
			this.getmx()
			this.getUserinfo()
		},
		methods: {
			getReturn () {
				uni.navigateBack({
					delta:1
				})
			},
			getUserinfo() {
				this.$request('', '/api/apiminiapp/getuserinfo', 'POST', {}, {}).then(res => {
					this.userinfo = res.data
				})
			},
			// 明细列表
			getmx() {
				var param = {
					pagesize: 999
				}
				this.$request('', '/api/apiminiapp/getuserrec', 'POST', param, {}).then(res => {
					this.data = res.data
				})
			},
			submit() {
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
		}
	};
</script>

<style lang="less">
	.btn-bottom {
		width: 85%;
		height: 80upx;
		background: #FDA917;
		box-shadow: 1upx 2upx 7upx 0upx rgba(255, 255, 255, 0.66);
		border-radius: 50upx;
		color: #fff;
		line-height: 80upx;
		text-align: center;
		font-size: 35upx;
		position: relative;
		top: 40upx;
		margin: 0 auto;
	}

	.nav-top {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 30upx;
		padding-left: 30upx;

		.top-left {
			display: flex;
			align-items: center;

			.line-y {
				width: 8upx;
				height: 30upx;
				background-color: #4768F3;
			}

			.top-title {
				color: #7B7B7B;
				font-weight: bold;
				font-size: 32upx;
				margin-left: 20upx;
			}
		}

		.top-right {
			width: 200upx;
			height: 50upx;
			display: flex;
			align-items: center;
			// justify-content: space-around;
			background: linear-gradient(to left, #434EE7 0%, #4987EE 100%);
			border-bottom-left-radius: 50upx;
			border-top-left-radius: 50upx;

			.yhk {
				margin-left: 20upx;
			}

			.top-title-right {
				color: #fff;
				font-size: 25upx;
				letter-spacing: 2upx;
				margin-left: 10upx;
			}
		}
	}

	.nav-bottom {
		width: 100%;
		// display: flex;
		// justify-content: space-around;
		// padding: 50upx
		padding-left: 30upx;
		padding-right: 30upx;
		margin-top: 30upx;
		
		.title-nav-bottom{
			display: flex;
			justify-content: space-around;
			color: #EA002C;
			font-size: 25upx;
			font-weight: bold;
			margin-bottom: 20upx;
		}
		
		.title-nav-bottom-bottom{
			margin-top: 20upx;
			display: flex;
			justify-content: space-around;
			color: #2C2C2C;
			font-size: 25upx;
			// font-weight: bold;
		}
		
		.bottom-left {
			.money-title {
				text-align: center;
				font-size: 25upx;
				color: #444447;
				font-weight: bold;
			}

			.bottom-money {
				font-size: 50upx;
				font-weight: bold;
				color: #EC1561;
				margin-top: 10upx;
			}
		}

		.bottom-right {
			.money-title {
				text-align: center;
				font-size: 25upx;
				color: #444447;
				font-weight: bold;
			}

			.bottom-money {
				font-size: 50upx;
				font-weight: bold;
				color: #7E7E7E;
				margin-top: 10upx;
			}
		}
	}

	.content-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 45upx;
		padding-left: 40upx;
		padding-right: 40upx;

		.content-info {
			display: flex;
			align-items: center;

			.info-name {
				font-size: 35upx;
				color: #fff;
				margin-left: 20upx;
			}
		}
	}

	.title-my {
		width: 100%;
		text-align: center;
		font-size: 36upx;
		color: #fff;
		padding-top: 30upx;
	}

	.my {
		width: 100%;
		height: 100vh;
		background-color: #eee;

		.my-top {
			width: 100%;
			height: 350upx;
			background-image: url('../../static/top-img.png');
			background-size: 100% 100%;
		}

		.image-style {
			width: 138upx;
			height: 138upx;
			background: #4768F3;
			border: 2px solid #FFFFFF;
			border-radius: 50%;
		}
	}

	.my-nav {
		width: 100%;

		// height: 100%;
		.nav-grjl {
			// height: 350upx;
			width: 93%;
			background-color: #fff;
			margin: 0 auto;
			border-radius: 10upx;
			position: relative;
			bottom: 40upx;
			box-shadow: 0px 9px 24px 0px rgba(10, 13, 47, 0.05);
		}

		.nav-grjl-two {
			height: 350upx;
			width: 93%;
			background-color: #fff;
			margin: 0 auto;
			border-radius: 10upx;
			position: relative;
			margin-top: 60upx;
			box-shadow: 0px 9px 24px 0px rgba(10, 13, 47, 0.05);
			// bottom: 40upx;
		}

		.nav-back-gg {
			width: 95%;
			margin: 0 auto;
			margin-top: 80upx;
		}
	}
</style>
